<script setup lang="js">
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios';

const config = reactive({
    header: ['天气情况', '数量'],
    data: [],
    
})

function getData() {
    axios.get('/api/queryAllWeatherCountTable')
       .then((response) => {
            console.log(response.data);
            if (response.data.code == 200) {
                const configData = [];
                for (let index = 0; index < response.data.data.length; index++) {
                    let yobj = response.data.data[index];
                    const obj = reactive({
                        name: yobj.weather,
                        value: yobj.count
                    });
                    configData.push(obj); // 修改此处，正确推送obj对象到数组
                }
                config.data = configData;
            }
        })
       .catch((error) => {
            console.error('获取天气统计数据失败：', error);
            // 这里可以根据业务需求添加更多错误处理逻辑，比如显示提示信息给用户等
        });
}

onMounted(() => {
    getData();
})
</script>

<template>
    <dv-border-box-1 class="dv-border-box-1">
        <div style="padding-top: 10px;">不同天气情况的统计数量</div>
        <dv-scroll-board :config="config" style="width:500px;height:350px" />
    </dv-border-box-1>
</template>

<style lang="css" scoped>
.dv-border-box-1 {
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-direction: column;
}


</style>